<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>DeepSeek 聊天助手</title>
    <script src="/static/js/vue.global.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/base.css">
</head>

<body>
    <div id="app" class="app-container">
        <div class="message-content">[[ outputText ]]</div>

        <div class="chat-input-container">
            <textarea class="chat-input" v-model="newMessage" placeholder="输入消息..."></textarea>
            <button class="send-btn" @click="sendMessage()">
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </div>
    <script>
        const { createApp, reactive, toRefs, onMounted, ref, computed, watch } = Vue;

        const app = createApp({
            setup() {
                const state = reactive({
                    activeView: 'intro',
                    outputText: '',
                    newMessage: '',
                })

                const typeWriter = (text) => {
                    let index = 0;
                    const typeNextChar = () => {
                        if (index < text.length) {
                            //动态更新Vue的响应式数据
                            state.outputText += text.charAt(index);
                            index++;
                            setTimeout(typeNextChar, 50);//每个字符间隔50毫秒
                        }
                    };
                    typeNextChar();
                }
                //获取后端数据并启动逐字打印
                const sendMessage = async () => {
                    const payload = {
                        session_id: 11,
                        message: state.newMessage,
                        attachment: ''
                    };

                    try {
                        // const response = await fetch('/api/chat/messages/stream', payload);
                        const response = await fetch(`{{ url_for('chat.stream_chat') }}`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Authorization': `Bearer ${localStorage.getItem('token')}`
                            },
                            body: JSON.stringify({
                                session_id: 11,
                                message: state.newMessage,
                                attachment: ''
                            })
                        });
                        if (!response.ok) {
                            thrownewError('Network response was not ok');
                        }
                        const text = await response.text();
                        typeWriter(text);
                    } catch (error) {
                        console.error('Error:', error);
                    }
                }
                return {
                    ...toRefs(state),
                    sendMessage,
                    typeWriter

                };
            }
        });
        // Vue3 分隔符配置
        app.config.compilerOptions.delimiters = ['[[', ']]'];
        app.mount('#app');
    </script>
</body>

</html>